<template>
  <!-- 内容区 -->
  <div class="contentContainer">
    <el-button type="primary" style="margin-bottom: 10px;" @click="addCategory">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="类别名称" width="180" />
      <el-table-column prop="description" label="描述" width="240"></el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="280"></el-table-column>
      <el-table-column prop="sort" label="排序权重" width="180"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="updateCategory(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 编辑面板 -->
  <el-dialog
    v-model="dialogVisible"
    :title="mode == 0 ? '新建类别' : '修改类别'"
    width="30%"
  >
    <div style="font-size: 18px; margin-bottom: 10px;" v-show="mode == 1">
      <span style="width: 45px; display: inline-block;">id:</span>
      <el-input style="width: 300px; margin-left: 10px;" disabled v-model="currentSelectedCategory.id" />
    </div>
    <div style="font-size: 18px; margin-bottom: 10px;">
      <span style="width: 45px; display: inline-block;">名称：</span>
      <el-input style="width: 300px; margin-left: 10px;" v-model="currentSelectedCategory.name" />
    </div>
    <div style="font-size: 18px; margin-bottom: 10px;">
      <span style="width: 45px; display: inline-block;">描述：</span>
      <el-input style="width: 300px; margin-left: 10px;" v-model="currentSelectedCategory.description" />
    </div>
    <div style="font-size: 18px; margin-bottom: 10px;">
      <span style="width: 45px; display: inline-block;">排序：</span>
      <el-select v-model="currentSelectedCategory.sort" style="width: 300px; margin-left: 10px;" placeholder="选择权重">
        <el-option v-for="it in sortMenu" :key="it" :label="it" :value="it" :index="it" />
      </el-select>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAction">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { 
  RequestPath, 
  startRequest, 
} from '../base/RequestWork';
import type { 
  CategoryItemData,
  CategoryResponseData
} from '../base/RequestWork';
import { ElMessage } from 'element-plus';

// 列表绑定的类别数据
let tableData = ref<CategoryItemData[]>([]);

// 控制编辑面板是否可见
let dialogVisible = ref(false);

// 当前编辑的类别数据
let currentSelectedCategory = ref<Partial<CategoryItemData>>({});

// 所提供选择的排序权重
const sortMenu = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

// 当前类别编辑对话框的模式：0为新建，1为编辑
let mode = ref(0);

// 组件挂载时的生命周期函数，进行数据加载
onMounted(() => {
  reloadData();
});

// 加载数据的方法
function reloadData() {
  // 请求所有类别数据
  startRequest(RequestPath.goodsCategoryGet, 'get', {})
    .then((response) => {
      const data = response as CategoryResponseData;
      tableData.value = data?.datas ?? [];
    })
    .catch((error) => {
      ElMessage.error({
        message: error.response?.data?.error || error.message || '请求失败'
      });
    });
}

// 新增类别
function addCategory() {
  mode.value = 0;
  dialogVisible.value = true;
  currentSelectedCategory.value = {};
}

// 更新类别信息
function updateCategory(ca: CategoryItemData) {
  mode.value = 1;
  dialogVisible.value = true;
  currentSelectedCategory.value = { ...ca };
}

// 点击编辑面板确认按钮执行的方法
function confirmAction() {
  if (
    !currentSelectedCategory.value.name ||
    !currentSelectedCategory.value.description
  ) {
    ElMessage.error({
      message: "请完善参数"
    });
    return;
  }

  if (mode.value === 0) {
    // 新增
    startRequest(
      RequestPath.goodsCategoryAdd,
      "post",
      currentSelectedCategory.value
    )
      .then(() => {
        ElMessage.success({
          message: "新增成功"
        });
        dialogVisible.value = false;
        // 刷新页面
        reloadData();
        // 清空当前编辑数据
        currentSelectedCategory.value = {};
      })
      .catch((error) => {
        ElMessage.error({
          message: error.response?.data?.error || error.message || '新增失败'
        });
      });
  } else {
    // 更新
    startRequest(
      RequestPath.goodsCategoryUpdate,
      "post",
      currentSelectedCategory.value
    )
      .then(() => {
        ElMessage.success({
          message: "更新成功"
        });
        dialogVisible.value = false;
        // 刷新页面
        reloadData();
        // 清空当前编辑数据
        currentSelectedCategory.value = {};
      })
      .catch((error) => {
        ElMessage.error({
          message: error.response?.data?.error || error.message || '更新失败'
        });
      });
  }
}
</script>